<template>
  <div class="suggest">
    <div v-if="suggestlist.length > 0">
      <h3>搜索“{{ keywords }}”</h3>
      <ul>
        <li
          class="suggestlist"
          v-for="(word, index) in suggestlist"
          :key="index"
          @click.stop="$emit('search', word.keyword)"
        >
          {{ word.keyword }}
        </li>
      </ul>
    </div>
    <load-animate v-else></load-animate>
  </div>
</template>

<script>
// 接口 /search/suggest?keywords=海阔天空
import _ from "lodash";
export default {
  props: {
    keywords: {
      type: String,
      define: "",
    },
  },
  data() {
    return {
      suggestlist: [],
    };
  },
  created() {
    this.getsuggestlist();
  },
  methods: {
    async getsuggestlist() {
      await this.axios
        .get(`/search/suggest?keywords=${this.keywords}&type=mobile`)
        .then((res) => {
          this.suggestlist = res.result.allMatch;
        });
    },
  },
  watch: {
    keywords: _.debounce(function () {
      this.getsuggestlist();
    }, 100),
  },
};
</script>

<style lang="scss" scroped>
.suggest {
  h3 {
    height: 50px;
    font-size: 15px;
    color: #507daf;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 10px;
    line-height: 50px;
  }
  ul {
    .suggestlist {
      position: relative;
      padding-left: 32px;
      line-height: 45px;
      font-size: 15px;
      &::before {
        content: "";
        width: 15px;
        height: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        background: url(../assets/images/search_icon.png);
      }
    }
  }
}
</style>
